<template>
  <el-header>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#409eff" router>
      <div class="logo">
        <router-link to="/">
          <img src="../assets/logo_steam.svg" style="transform: scale(0.6);" alt />
        </router-link>
      </div>
      <el-menu-item router="/">首页</el-menu-item>
      <el-menu-item router="/society">社区</el-menu-item>
      <el-menu-item router="/about">关于</el-menu-item>
    </el-menu>
  </el-header>
</template>

<script>
export default {
  name: "nav-menu",
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style>
  /* 顶栏容器CSS */
  .el-header .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }

  .el-header .logo {
    height: 60px;
    width: 300px;
    float: left;
    margin-right: 100px;
  }

  /* 顶栏容器CSS END */
</style>
